<template>
  <view class="container">
    <view>
      <u-navbar @click="backIndex" back-icon-color="#fff" title-color="#fff" title="违章强化学习" :background="background">
      </u-navbar>
    </view>


    <swiper :duration="config.swiperDuration" class="exam-swiper" :current="examIndex" @change="onChange">
      <swiper-item @touchmove.stop="stopTouchMove" v-for="(item, index) in vodeoList" :key="item.id">
        <!-- 当前页与前后两页渲染卷面试题内容，其他页不渲染以节约资源提升性能 -->
        <!--  <exam-paper-item
          v-if="Math.abs(examIndex - index) <= 1"
          :idx="index"
          :cur-item="item"
        ></exam-paper-item> -->
        <view class="title">
          {{item.title}}
        </view>
        <view class="image">
          <video class="image_img" @error="videoErrorCallback" :danmu-list="danmuList" enable-danmu danmu-btn controls
            :src="item.src" @timeupdate="bindtimeupdate"></video>
        </view>
        <view class="countDown">
          <view class="">
            <u-button :disabled="item.id===0" @click="prev(index)"> 上一页 <u-icon name="arrow-left" class="arrow-left"></u-icon></u-button>
          </view>
<!--          <view class="countDown_border">
            <u-count-down ref="uCountDown" @change="changeCountDown" :data-index="index" :autoplay="true"
              :timestamp="timestamp" :show-days="false" :show-hours="false" :show-minutes="false"></u-count-down>
          </view> -->
          <view class="">
            <u-button :disabled="item.id===4" @click="next(index)" data-index="index"> 下一页 <u-icon name="arrow-right"
                class="arrow-right"></u-icon></u-button>
          </view>
        </view>
      </swiper-item>
    </swiper>





  </view>
</template>

<script>
  import config from '@/uni_modules/sv-exam-plus/config.js'
  import store from '@/uni_modules/sv-exam-plus/store/index.js'

  export default {
    data() {
      return {
        historyTime: 0,
        vodeoList: [{
            id: 0,
            title: ' 变电安规及变电运维类学习文件名称-1',
            src: 'https://vd3.bdstatic.com/mda-qck2xakfga08psiy/576p/h264/1710986763144811166/mda-qck2xakfga08psiy.mp4',
            disabled: true,
          },
          {
            id: 1,
            title: ' 变电安规及变电运维类学习文件名称-2',
            src: 'https://vd3.bdstatic.com/mda-qck2xakfga08psiy/576p/h264/1710986763144811166/mda-qck2xakfga08psiy.mp4',
            disabled: true,
          },
          {
            id: 2,
            title: ' 变电安规及变电运维类学习文件名称-3',
            src: 'https://vd3.bdstatic.com/mda-qck2xakfga08psiy/576p/h264/1710986763144811166/mda-qck2xakfga08psiy.mp4',
            disabled: true,
          },
          {
            id: 3,
            title: ' 变电安规及变电运维类学习文件名称-4',
            src: 'https://vd3.bdstatic.com/mda-qck2xakfga08psiy/576p/h264/1710986763144811166/mda-qck2xakfga08psiy.mp4',
            disabled: true,
          },
        ],
        disabled: true,
        customStyle: {
          color: 'black',
        },
        config, // 兼容写法，需要先声明否则报错
        background: {
          backgroundImage: 'linear-gradient(45deg, rgb(28, 187, 180), rgb(141, 198, 63))'
        },
        danmuList: [{
            text: '第 1s 出现的弹幕',
            color: '#ff0000',
            time: 1
          },
          {
            text: '第 3s 出现的弹幕',
            color: '#ff00ff',
            time: 3
          }
        ],
        danmuValue: '',
        timestamp: 10,
      };
    },
    computed: {
      examIndex: {
        set(newIndex) {
          store.commit('updateIndex', newIndex)
        },
        get() {
          return store.state.examIndex
        }
      },

    },
    onReady: function(res) {
      this.videoContext = uni.createVideoContext('myVideo')
    },

    methods: {
      backIndex() {
           uni.navigateback();
         },
      // 监听播放进度
      bindtimeupdate(e) {
        var currentTime = e.detail.currentTime; //当前进度
        var duration = e.detail.duration; //视频时长

        //视频播放完成后触发奖励保存接口
        // let percent = 100;//播放进度百分比，可以改成 80 或者90等其它数字，到达时触发奖励保存
        let percent = this.sectionInfo.type_config.video_complate_rate;
        let upper = duration * (percent / 100);
        if (currentTime >= upper) {
          if (this.isTo) {
            this.isTo = false; //isTo 奖励加锁，进入页面只能触发一次
            console.log('触发奖励请求接口');
            this.$request(this.$api.Weike.sectionComplete, this.options).then((res) => {});
          }
        }

        // 禁止拖动进度条快进
        if (currentTime - this.historyTime > 2) {
          uni.showToast({
            title: '不能快进哦',
            icon: 'none',
          });
          let videoContext = wx.createVideoContext('myVideo');
          videoContext.seek(this.historyTime);
        }
        this.historyTime = currentTime;
      },

      sendDanmu: function() {
        this.videoContext.sendDanmu({
          text: this.danmuValue,
          color: this.getRandomColor()
        });
        this.danmuValue = '';
      },
      videoErrorCallback: function(e) {

      },
      getRandomColor: function() {
        const rgb = []
        for (let i = 0; i < 3; ++i) {
          let color = Math.floor(Math.random() * 256).toString(16)
          color = color.length == 1 ? '0' + color : color
          rgb.push(color)
        }
        return '#' + rgb.join('')
      },

      stopTouchMove() {
        return false;
      },
      changeCountDown(timestamp) {
        this.vodeoList.map((item) => {
          if (item.id === this.examIndex && timestamp === 0) {
            item.disabled = false
          } else {
            item.disabled = true;
            this.timestamp = 10
          }
        })
        // const element = document.querySelector('[data-index="' + this.examIndex + '"]');
        // const index = parseInt(element.getAttribute('data-index'));

        // if (index === this.examIndex && timestamp === 0) {
        //   this.ifDisabled = false;
        // } else {
        //   this.ifDisabled = true;
        //   this.timestamp = 10
        // }
      },
      // ref形式获取内部的值
      getSeconds() {
        console.log(this.$refs.uCountDown.second);
      },
      enableSwiper() {
        this.$set(this.$data, 'swiperDisabled', false);
      },
      next(currentIndex) {
        if (this.examIndex === currentIndex) {
          this.examIndex = this.examIndex >= this.vodeoList.length - 1 ? this.vodeoList.length - 1 : this.examIndex + 1
          // this.vodeoList.map((item)=>{
          //   item[this.examIndex] = true
          // })
        }
      },
      prev(currentIndex) {
        if (this.examIndex === currentIndex) {
          this.examIndex = this.examIndex <= 0 ? 0 : this.examIndex - 1
          this.vodeoList.map((item) => {
            item[this.examIndex] = true
          })
        }
      },
      onChange(e) {
        // store.commit('updateIndex', e.detail.current)
        // this.$refs.uCountDown[e.detail.current].start();
      }
    }
  }
</script>

<style lang="scss" scoped>
  .container {
    .exam-swiper {
      height: 100vh;

      .title {
        margin: 20rpx 0;
        text-align: center;
      }

      .image {
        margin: 20rpx;

        .image_img {
          display: block;
          width: 100%;
          height: 800rpx !important;
        }
      }

      .countDown {
        position: fixed;
        bottom: 150rpx;
        width: 100%;
        height: 200rpx;
        background-color: #fff;
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-top: 20rpx;

        .arrow-left {
          font-size: 50rpx;
          margin: 20rpx;
        }

        .arrow-right {
          font-size: 50rpx;
          margin: 20rpx;
        }

        .countDown_border {
          border: 2px solid #000;
          /* 设置边框颜色和宽度 */
          border-radius: 50%;
          /* 设置边框半径为50%以创建一个圆形 */
          width: 150rpx;
          /* 设置宽度以适应<u-count-down>组件的大小 */
          height: 150rpx;
          /* 设置高度以适应<u-count-down>组件的大小 */
          /* 设置内边距以留出空间放置<u-count-down>组件 */
          text-align: center;
          line-height: 150rpx;

        }
      }

    }

    .u-hairline-border:after {
      border: none !important;
    }

    uni-button[disabled]:not([type]) {
      background-color: #fff;
    }
  }
</style>